<script setup>
import { ref } from 'vue'
import { useSettingsStore } from '../../stores/modules/settings'

const settingsStore = useSettingsStore()
const previewText = ref('Hello, Julebu! 1234567890')
</script>

<template>
  <div>
    <div class="setting-section">
      <h3>主题设置</h3>
      <div class="theme-options">
        <div
          class="theme-option"
          :class="{ active: settingsStore.settings.theme === 'light' }"
        >
          <div class="theme-preview light"></div>
          <el-radio
            v-model="settingsStore.settings.theme"
            label="light"
            @change="settingsStore.handleThemeChange"
            >浅色</el-radio
          >
        </div>
        <div
          class="theme-option"
          :class="{ active: settingsStore.settings.theme === 'dark' }"
        >
          <div class="theme-preview dark"></div>
          <el-radio
            v-model="settingsStore.settings.theme"
            label="dark"
            @change="settingsStore.handleThemeChange"
            >深色</el-radio
          >
        </div>
      </div>
    </div>

    <div class="setting-section">
      <h3>字体设置</h3>
      <div class="font-settings">
        <div class="font-select">
          <span style="color: var(--color-text)">选择字体</span>
          <el-select v-model="settingsStore.settings.font" class="font-selector" style="color:#181818">
            <el-option label="系统默认字体" value="系统默认字体" />
            <el-option label="Fredoka" value="Fredoka" />
            <el-option label="微软雅黑" value="微软雅黑" />
          </el-select>
        </div>
        <div class="preview-text">
          <span>预览文本</span>
          <div class="text-preview" :style="{ fontFamily: settingsStore.settings.font }">
            {{ previewText }}
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped>
.setting-section {
  margin-bottom: 32px;
}

.setting-section h3 {
  margin: 0 0 16px;
  font-size: 16px;
  font-weight: 500;
  color: var(--color-text);
}

.theme-options {
  display: flex;
  gap: 16px;
}

.theme-option {
  text-align: center;
}

.theme-preview {
  width: 80px;
  height: 60px;
  border-radius: 8px;
  margin-bottom: 8px;
  border: 2px solid transparent;
  transition: border-color 0.3s;
}

.theme-option.active .theme-preview {
  border-color: var(--el-color-primary);
}

.theme-preview.light {
  background-color: #ffffff;
  border: 1px solid var(--el-border-color);
}

.theme-preview.dark {
  background-color: #1a1a1a;
}

.font-settings {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.font-select {
  display: flex;
  align-items: center;
  gap: 16px;
  color: var(--el-button-save-hover-text-color);
}

.font-selector {
  width: 200px;
  color: var(--menu-text-hover-color);
}

.preview-text {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.text-preview {
  padding: 16px;
  border-radius: 8px;
  background-color: var(--el-fill-color-light);
  color: var(--el-text-color-primary);
}

:deep(.el-form-item) {
  margin-bottom: 24px;
}

:deep(.el-form-item__label) {
  color: var(--el-text-color-regular);
}

:deep(.el-input__wrapper) {
  background-color: var(--el-fill-color-light);
}

:deep(.el-input__inner) {
  color: var(--el-text-color-regular);
}

:deep(.el-select__wrapper) {
  background-color: var(--el-fill-color-light);
}

</style>


<style>

</style>